<template>
  <div class="realphotogroup">
    <div class="tit">
      <span
        class="goback" style="font-size: .2rem;font-weight: 700;">实时相机</span>
      <span style="font-size: .2rem;margin:0 .1rem;">></span>
      <span style="font-size: .2rem;font-weight: 700;">{{ card }}号相机</span>


      <el-date-picker
        style="width: 3.5rem;margin:0 .2rem;"
        @change="trandate"
        v-model="pst"
        type="daterange"
        range-separator="-"
        start-placeholder="请选择时间"
        end-placeholder="请选择时间">
      </el-date-picker>
      <el-button v-if="abilityList.indexOf('edit') != -1" @click="everyDelete" type="success" size="small">批量删除
      </el-button>

      <div style="position: absolute;right: .2rem;">
        <el-button @click="goback" size="small">返回</el-button>
      </div>
    </div>

    <div class="box clearfix">
      <div class="smallbox" v-for="(item,index) in imglist">
        <div @click="goauthenticate(item,index)">
          <div v-for="im in reverse(item.pathList)"><img :src="im" alt=""></div>

          <span
            style="position: absolute;top: 0;right: .2rem;top: .2rem;display: inline-block;line-height: .2rem;border-radius: 2px;background-color: red;color: #ffffff"
            v-for="dn in item.discernName.split('#')">{{dn}}</span>

          <div class="txt">
            <span>{{ item.number }}</span>
            &nbsp;
            <span class="el-icon-picture"></span>
            <span class="isok" :style="item.status==0?'background-color: red;':'background-color: #00CC46;'">
              {{ item.status == 0 ? '未鉴定' : '已鉴定' }}
            </span>
          </div>
        </div>
        <div>
          <span>组编号：{{ item.groupNum }}</span>
          <span
            v-if="abilityList.indexOf('edit') != -1"
            @click="delG(item)"
            style="margin-left: .3rem;text-decoration: underline;color: red;cursor: pointer">删&nbsp;除</span>
          <br>
          <span>时间：{{ item.shootTime }}</span>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  import http from '../utils/http'
  import api from '../utils/api'

  export default {
    data() {
      return {
        card: 0,
        imglist: [],
        pst: "",
        t1: "",
        id: "",
        abilityList: []
      }
    },
    mounted() {

    },
    created() {
      this.gettodayGrouping();
      this.card = this.$route.query.card;
      this.id = this.$route.query.id;
      this.abilityList = sessionStorage.getItem('abilityList');
    },
    methods: {
      delG(item) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let vm = this;
          (async function f() {
            let res = await http.delete(api.infrared.deleteByGroupId + '?groupId=' + item.groupId)
            if (res.data.code == '200') {
              vm.$message({
                message: '删除成功',
                type: 'success'
              })
              vm.gettodayGrouping();
            } else {
              vm.$message({
                message: res.data.message,
                type: 'success'
              })
            }
          })()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      everyDelete() {
        this.$router.push({
          path: '/Photo/realphoto/BatchDeletion',
          query: {id: this.id, card: this.card, time: this.t1}
        })
      },
      reverse(t) {
        var a = [];
        t.forEach(e => {
          let iv = e.split('.');
          if (iv[iv.length - 1].toLowerCase() == 'mp4') {
            a.unshift("../../static/images/shipin.jpg");
          } else {
            a.unshift(e)
          }
        })
        return a;
      },
      goback() {
        this.$router.push('/Photo/realphoto');
      },
      goauthenticate(d, index) {
        // imglist
        this.$router.push({
          path: "/Photo/realphoto/realauthenticate",
          query: {
            id: this.id,
            groupId: d.groupId,
            card: this.card,
            allnum: this.imglist.length,
            groupNumber: d.groupNum,
            index: index + 1
          }
        })
      },
      gettodayGrouping() {
        var vm = this, id = this.$route.query.id;
        (async function () {
          let res = await http.get(api.infrared.todayGrouping + '?sampleId=' + id)
          if (res.data.code == '200') {
            vm.getdata();
          }
        })()
      },
      getdata() {
        var vm = this, id = this.$route.query.id;
        (async function () {
          let res = await http.get(api.infrared.newgetCameraGroups, {
            cameraEnvirId: id,
            date: vm.t1
          })
          if (res.data.message == '成功') {
            var a = res.data.data;
            for (var i = 0; i < a.length; i++) {
              for (var k = 0; k < 3; k++) {
                if (a[i].pathList[k] == undefined) {
                  a[i].pathList[k] = '../../static/images/huitu.jpg'
                }
              }
            }
            vm.imglist = a;
          }
        })()
      },
      trandate(daterange) {
        console.log(this.pst)
        if (this.pst != null) {
          var year = daterange[0].getFullYear();
          var month = daterange[0].getMonth() + 1;
          var date = daterange[0].getDate();
          if (month >= 1 && month <= 9) {
            month = "0" + month;
          }
          if (date >= 0 && date <= 9) {
            date = "0" + date;
          }
          var t1 = year + "-" + month + "-" + date;
          var years = daterange[1].getFullYear();
          var months = daterange[1].getMonth() + 1;
          var dates = daterange[1].getDate();
          if (months >= 1 && months <= 9) {
            months = "0" + months;
          }
          if (dates >= 0 && dates <= 9) {
            dates = "0" + dates;
          }
          var t2 = years + "-" + months + "-" + dates;
          this.t1 = t1 + "~" + t2
        } else {
          this.t1 = "";
        }
        this.getdata();
      },
    }
    ,
    beforeRouteLeave(to, from, next) {
      if (to.name === 'realphoto') {
        to.meta.keepAlive = true
      }
      next()
    }
  }
</script>
<style scoped>
  @import "../../static/css/realphotogroup.css";
</style>
